<template>
  <el-card shadow="never" class="mt-4">
    <template #header>
      <div class="flex justify-between">
        <span class="text-sm">订单统计</span>
        <div  >
          <el-check-tag
            v-for="( item, index ) in options" :key="index" 
            :checked="current == item.value" 
            style="margin-right: 8px"
            @click="handleChoose(item.value)"
          >
            {{ item.text }}
          </el-check-tag>
        </div>
      </div>
    </template>
    <!-- card body -->
    <div ref="el" id="chart" style="width: 100%l; height: 300px"></div>
  </el-card>
  
</template>

<script lang='ts' setup>
import { ref, onMounted, onBeforeMount } from 'vue'
import * as echarts from 'echarts';
import { getstatistics3 } from '@/services/index'
import { useResizeObserver } from '@vueuse/core'

const current = ref('week')

const options = [
  {
    text: '近一个月',
    value: 'month'
  },
  {
    text: '近一个周',
    value: 'week'
  },
  {
    text: '近24小时',
    value: 'hour'
  },
]

const handleChoose = (type:string) => {
  current.value = type
  getData()
}

var myChart:any = null
onMounted(()=>{
  var chartDom:any = document.getElementById('chart');
  myChart = echarts.init(chartDom);

  getData()
})

function getData(){
  let option = {
    xAxis: {
      type: 'category',
      // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      data: []
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        // data: [120, 200, 150, 80, 70, 110, 130],
        data: [],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        }
      }
    ]
  };

  option && myChart.setOption(option);

  myChart.showLoading();
  getstatistics3(current.value).then(res=>{
    console.log(res)
    option.xAxis.data = res.data.data.x
    option.series[0].data = res.data.data.y
    myChart.setOption(option)
  }).finally(()=>{
    myChart.hideLoading()
  })
}

onBeforeMount(()=>{
  if(myChart){
    echarts.dispose(myChart)
  }
})

const el = ref(null)
useResizeObserver(el, (entries) => {
  // console.log(entries);
  myChart.resize()
})



</script>

<style scoped>

</style>
